<script lang="ts" setup>
import { ref, onMounted } from "vue"
import { useRoute } from "vue-router"
const url = ref('')
const route = useRoute()
onMounted(() => {
  url.value = route.path
})
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <el-menu active-text-color="#fff" background-color="#001529" class="el-menu-vertical-demo" :default-active="url"
          text-color="#b4bbc5" style="height: 100vh;overflow-y: auto;" :router="true">
          <el-menu-item index="/dashboard">
            <span>数据看板</span>
          </el-menu-item>

          <el-sub-menu index="7">
            <template #title>
              <span>工作台</span>
            </template>

            <el-menu-item index="/dojvprojects"> 直营联营项目</el-menu-item>
            <el-menu-item index="/fdojvprojects"> 非直营联营项目</el-menu-item>
            <el-menu-item index="/newitem"> 新增项目</el-menu-item>


          </el-sub-menu>
          <el-menu-item index="/poolAgreement">
            <span>联营合约</span>
          </el-menu-item>
          <el-menu-item index="/jointCalculator">
            <span>联营计算器</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container style="height: 100vh;overflow-y: auto; background-color: #f2f2f2;">
        <el-header style="background-color: white;">Header</el-header>
        <el-main style="background-color: white;margin: 20px;">
          <RouterView></RouterView>
        </el-main>
      </el-container>

    </el-container>
  </div>
</template>

<style lang="less"  scoped>
.el-menu-item.is-active {
  background-color: rgb(24, 144, 255);
  font-weight: 700;
}
.el-main{
  padding: 0dvb;
}
</style>